<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>中国传统美食</title>
        <style>

             /* 基本页面样式设置 */
             body {
                font-family: 'Microsoft YaHei', sans-serif; /* 设置字体 */
                margin: 0; /* 去除默认外边距 */
                padding: 0; /* 去除默认内边距 */
                background-color: #f9f3e7; /* 背景色 */
                color: #333; /* 文字颜色 */
            }
    
            /* 容器样式设置 */
            .container {
                width: 90%; /* 容器宽度为视口的90% */
                max-width: 1200px; /* 最大宽度为1200px */
                margin: 0 auto; /* 自动水平居中 */
                padding: 20px; /* 内边距 */
            }
    
            /* 标题样式设置 */
            h1 {
                color: #d72638; /* 标题颜色 */
                font-size: 3.5em; /* 字体大小 */
                margin-bottom: 20px; /* 下边距 */
                text-align: center; /* 居中对齐 */
            }
    
            /* 描述文字样式设置 */
            .description {
                font-size: 1.75em; /* 字体大小 */
                line-height: 1.8; /* 行高 */
                margin: 20px 0; /* 上下边距 */
                text-align: justify; /* 两端对齐 */
                text-indent: 2em; /* 首行缩进 */
            }
    
            /* 搜索框样式设置 */
            .search-bar {
                text-align: center; /* 居中对齐 */
                margin: 20px 0; /* 上下边距 */
            }
    
            .search-bar input {
                padding: 10px; /* 内边距 */
                font-size: 1em; /* 字体大小 */
                width: 100%; /* 宽度为100% */
                max-width: 600px; /* 最大宽度 */
                border: 1px solid #d72638; /* 边框颜色 */
                border-radius: 5px; /* 边框圆角 */
                box-sizing: border-box; /* 包括内边距和边框在内的宽度计算 */
            }
    
            /* 城市按钮样式设置 */
            .city-buttons {
                display: flex; /* 使用Flexbox布局 */
                justify-content: center; /* 居中对齐 */
                margin: 20px 0; /* 上下边距 */
            }
    
            .city-button {
                background-color: #d72638; /* 背景颜色 */
                color: white; /* 文字颜色 */
                border: none; /* 无边框 */
                border-radius: 5px; /* 边框圆角 */
                padding: 10px 20px; /* 内边距 */
                font-size: 1.2em; /* 字体大小 */
                margin: 0 10px; /* 左右边距 */
                cursor: pointer; /* 鼠标悬停时显示手形光标 */
                transition: background-color 0.3s; /* 背景色渐变效果 */
            }

        </style>


    </head>
    <body>
        <div class="description">
            <h1>中国传统美食</h1>
            <p class="description">
                传统美食 ，是我们大中华的典故，“民以食为天”，随着回归自然食品的兴起，传统美食越来越受到人们的青睐。其实，这些食物的由来都有它美妙的传说。下面让我来为大家介绍我精选出来的五个城市的中华美食吧
            </p>
            <div class="search-bar">
                <!-- 搜索框 -->
                <input type="text" id="search" placeholder="搜索美食或城市..." oninput="searchFood()">
            </div>
    
            <div class="city-buttons">
                <!-- 城市选择按钮 -->
                <button class="city-button" onclick="showSection(0)">北京</button>
                <button class="city-button" onclick="showSection(1)">上海</button>
                <button class="city-button" onclick="showSection(2)">西安</button>
                <button class="city-button" onclick="showSection(3)">广州</button>
                <button class="city-button" onclick="showSection(4)">成都</button>
            </div>
            <div class="section active" id="section0">
                <img src="美食图片/北京美食.jpg" alt="北京美食" class="image">
                <div class="text-content">
                    <div class="section-title">北京 - 美食</div>
                    <p>北京以其丰富的美食文化而闻名，特别是以下两种经典美食：</p>
                    <button onclick="toggleDetails(0)">查看详情</button>
                    <div class="details" id="details0">
                       <p>1.炸酱面：老北京炸酱面，是中国传统特色面食，初起源北京，后传遍大江南北之后便被誉为“中国十大面条”之一，老北京炸酱面入选“中国地域十大名小吃”北京榜。</p>
                       <img src="美食图片/炸酱面.png" alt="炸酱面">
                       <p>2.北京烤鸭：北京烤鸭是具有世界声誉的北京著名菜，起源于中国南北朝时期，《食珍录》中已记有炙鸭，在当时是宫廷名菜。</p>
                       <img src="美食图片\北京烤鸭.png" alt="烤鸭">
                    </div>
                 </div>
            </div>
            <div class="section" id="section3">
                <img src="美食图片\广州美食.jpg" alt="广州美食" class="image">
                <div class="text-content">
                    <div class="section-title">广州 - 美食</div>
                    <p>广州以其丰富的美食而闻名，以下是两种经典美食：</p>
                    <button onclick="toggleDetails(3)">查看详情<[表情]tton>
                    <div class="details" id="details3">
                        <p>1. 叉烧：广式烧味之一，味道甜美。</p>
                        <img src="美食图片\叉烧.jpg" alt="叉烧">
                        <p>2. 粽子：广州的传统美食，特别是在端午节时。</p>
                        <img src="美食图片\粽子.jpg" alt="粽子">
                    </div>
                </div>
            </div>
    
        </div>
        <!-- 上海美食部分 -->
        <div class="section" id="section1">
            < img src="美食图片\上海美食.jpg" alt="上海美食" class="image">
            <div class="text-content">
                <div class="section-title">上海 - 美食</div>
                <p>上海美食以其独特的口味和丰富的选择而著称，以下是两种经典美食：</p >
                <button onclick="toggleDetails(1)">查看详情</button>
                <div class="details" id="details1">
                    <p>1.蟹黄汤包在三国时期被发明，在明清时期已经享有盛誉。其特色是皮薄如纸，吹弹即破，制作“绝”、形态“美”、吃法“奇”。</p >
                    < img src="美食图片\蟹黄汤宝.jpg" alt="蟹黄汤包">
                    <p>2. 生煎包：外焦里嫩，内有浓郁的肉汁。</p >
                    < img src="美食图片\生煎包.jpg" alt="生煎包">
                </div>
            </div>
        </div>
        <!-- 西安美食部分 -->
        <div class="section" id="section2">
            <img src="美食图片\西安美食.jpg" alt="西安美食" class="image">
            <div class="text-content">
                <div class="section-title">西安 - 美食</div>
                <p>西安是中华美食的重要发源地之一，以下是两种经典美食：</p>
                <button onclick="toggleDetails(2)">查看详情</button>
                <div class="details" id="details2">
                    <p>1. 羊肉泡馍：经典西安风味的传统美食，汤鲜味美。</p>
                    <img src="美食图片\羊肉泡膜.jpg" alt="羊肉泡馍">
                    <p>2. 火烧：外脆内软，是西安小吃的代表之一。</p>
                    <img src="美食图片\火烧.jpg" alt="火烧">
                </div>
            </div>
        </div>
        <script>
            function showSection(index) {
            // 隐藏所有部分
            const sections = document.querySelectorAll('.section');
            sections.forEach((section, i) => {
                section.classList.remove('active');
                document.getElementById('details' + i).style.display = 'none';
            });

            // 显示选定的部分
            const selectedSection = document.getElementById('section' + index);
            selectedSection.classList.add('active');
        }

            function toggleDetails(index) {
            const details = document.getElementById('details' + index);
            if (details.style.display === 'none' || details.style.display === '') {
                details.style.display = 'block';
            } else {
                details.style.display = 'none';
            }
        }
             function searchFood() {
                const query = document.getElementById('search').value.toLowerCase();
                const sections = document.querySelectorAll('.section');
                sections.forEach((section) => {
                    const title = section.querySelector('.section-title').textContent.toLowerCase();
                    if (title.includes(query)) {
                         section.style.display = 'flex';
                         } else {
                            section.style.display = 'none';
                        }
                     });
                    }
            
        </script>

        
    </body>
</html>